<template>
	<view>
		<!-- <uni-nav-bar left-icon="back" @clickLeft="goBack" @clickRight="backRight" right-text="搜索" title="维修"></uni-nav-bar> -->
		<view class="">
			<v-tabs v-model="activeTab" bgColor="#F0F3F6" :fixed="true" :lineScale="0.2" :scroll="false" :tabs="tabs" activeFontSize="32rpx" fontSize="30rpx"  @change="getByStatus($event,true)"></v-tabs>
			
		</view>
		<!-- 内容  待微修-->
		<view class="" v-if="recordList.length > 0">
			<uni-card v-for="(item,index) in recordList" :key="index">
				<view class="record" @click="openDetail(item.repairId)"> 
					<view class="record-address">
						{{item.elevatorName}}
						<!-- <text>[{{item.upkeepType}}]</text> -->
					</view>
					<view class="record-state">
						[{{item.faultReason}}]
					</view>
					<view class="information">
						<!-- left -->
						<view class="information-left">
							<view class="record-time">
								上报方式:
								<text>人工上报</text>
							</view>
							<view class="record-time">
								截止时间:
								<text>{{item.dispatchDate}}</text>
							</view>
						</view>
						<view class="successState" v-show="activeTab == 1">
							<image src="../../../static/img/detailsMsg/time.png" mode=""></image>
							<!-- <uni-icons type="success"></uni-icons> -->
							<view class="">
								<text>待确认</text>
							</view>
						</view>
					</view>
					
				</view>
			</uni-card>
		</view>
		<view v-else>
			<null-page></null-page>
		</view>
	</view>
</template>

<script>
	import workRepair from "@/serve/api/workRepair.js";
	import polling from "@/serve/api/polling.js";
	
	import nullPage from '@/common/null.vue'
	export default {
		components:{
			nullPage
		},
		data() {
			return {
				activeTab: 0,
				tabs: ['待维修', '待确认', '已完成', ],

				recordList: [],//列表

				pageNum: 1,
				getListFlag: true,
				latitude:"",
				longitude:"",
			}
		},
		onLoad(e) {
			let that = this;
			this.isOverhaul = e.isOverhaul
			uni.setNavigationBarTitle({
				title:this.isOverhaul == 1 ? '维修' : '大修'
			})
			uni.getLocation({
				type: 'gcj02',
				success:function(da) {
					that.longitude = da.longitude
					that.latitude = da.latitude
					
					that.getByStatus(0)
				},
			});
			
			// that.getByStatus(0)
		},
		methods: {
			async openDetail(repairId){
				if(this.activeTab == 0){
					
					const res = await polling.startElevatorRepair({
						repairId: repairId,
						longitude: this.longitude,
						latitude: this.latitude
					});
					if (res) {
						this.navRouter(`../gird-service/process?types=0&repairId=${repairId}`)
					}
				}else if(this.activeTab == 1){
					this.navRouter(`../gird-service/process?types=1&repairId=${repairId}`)
				}else if(this.activeTab == 2){
					this.navRouter(`../gird-service/gird-service?repairId=${repairId}`)
				}
			},

			async getByStatus(index, flag) {
				if (flag) {
					this.recordList = [];
					this.pageNum = 1;
					this.getListFlag = true;
				}
				console.log({
					reviewType: Number(index) + 1,
					pageNum: this.pageNum,
					pageSize: 10,
					isOverhaul:this.isOverhaul
				})
				const res = await workRepair.selectListByStatus({
					reviewType: Number(index) + 1,
					pageNum: this.pageNum,
					pageSize: 10,
					isOverhaul:this.isOverhaul
				});
				console.log(res)
				if (res.data.data.list.length < 10) {
					this.getListFlag = false;
				}
				this.recordList.push(...res.data.data.list)
			},

			// 导航返回事件
			// goBack() {
			// 	uni.switchTab({
			// 		url: "../../tabbar/work/work"
			// 	})
			// },
			// 导航右边事件
			// backRight() {
			// 	uni.switchTab({
			// 		url: ""
			// 	})
			// },

		},

		onReachBottom(e) {
			if (this.getListFlag) {
				this.pageNum = this.pageNum + 1;
				this.getByStatus(this.activeTab);
			}
		}
	}
</script>

<style scoped>
	.uni-icons {
		color: #3AC211;
	}

	.uni-card {
		width: 670rpx;
		/* height: 280rpx; */
		background: #FFFFFF;
		box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(52, 54, 61, 0.05);
		border-radius: 16rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		border: none;
		line-height: 280rpx;
		text-align: left;
	}

	.record {
		font-family: PingFang SC;
		font-weight: 400;
		/* margin: 40rpx 0; */
	}

	.record-address {
		font-size: 30rpx;
		color: #34363D;
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;
	}

	.record-address text {
		color: #017EFE;
	}

	.record-state {
		font-size: 30rpx;
		color: #017EFE;
	}

	/* 左右 信息*/
	.information {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: nowrap;
	}

	.record-time {
		font-size: 24rpx;
		color: #989BA6;
	}

	.record-time text {
		margin-left: 15rpx;
		color: #34363D;
		word-spacing: 15rpx;
		letter-spacing: 1rpx;
	}

	.successState {
		background: #65D0D5;
		width: 150rpx;
		height: 60rpx;
		text-align: center;
		/* box-shadow: 0px 5rpx 10rpx 0px rgba(58, 194, 17, 0.2); */
		border-radius: 28rpx;
		color: #FFFFFF;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;

	}

	.successState image {
		width: 24rpx;
		height: 24rpx;
		background: #65D0D5;
		border-radius: 10rpx;
		vertical-align: middle;
	}

	.successState text {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		margin-left: 10rpx;
	}
</style>
